<template>
	<el-dialog :visible.sync="options.showEditDialog" width="800px" height="400px" class="evalDialog">
		<div style="margin-left: 40px; margin-top: 40px;">
			<div style="padding: 18px; font-size: 24px; font-weight: bold;">编辑门店信息</div>
			<div style="margin: 20px 20px; display: flex;">
				<p>门店名称：</p>
				<el-input placeholder="请输入门店名称" v-model="options.msg.shopName" style="width: 50%; margin-left: 20px;">
				</el-input>
			</div>

			<div style="margin: 20px 20px; display: flex;">
				<p>门店展示照片:</p>
				<el-upload ref="upload" :file-list="fileLists" v-model="imghref" :auto-upload="true"  :on-change="onChange"  
					action="https://house.fcw-china.com/system/v1/common/upload" list-type="picture-card"
					:on-remove="handleRemove" :on-success="success"  :limit="2" :on-preview="handlePictureCardPreview">
					<i class="el-icon-plus"></i>
				</el-upload>
			</div>
			<div class="bottom">
				<el-button @click="sureEdite">确认修改</el-button>
				<el-button @click="options.showEditDialog=false">取消</el-button>
			</div>
		</div>
		<el-dialog :visible.sync="imgShow" width="600px" class="evalDialog" style="padding: 20px;" :modal="false">
			<img :src="imgHref" alt="" style="width: 100%;">
		</el-dialog>
	</el-dialog>
</template>

<script>
	export default {
		props: {
			options: {
				type: Object,
				require: true
			}
		},
		data() {
			return {
				cancel:false,
				shopList: Object,
				imghref: '',
				shopId:'',
				shopName:'',
				fileLists: [], //图片的路径
				imgShow: false, //图片放大功能
				imgHref: '', //图片路径
				showInput: false, //显示原因弹窗
				textarea: '', //原因
			}
		},
		created() {
			console.log(this.$props.options.msg.shopName, 'options.fileLists');
		},
		watch: {
			'options.showEditDialog'() {
				if (this.options.showEditDialog) {
					this.fileLists.push({url:this.options.msg.shopShowPhoto});
					this.shopId=this.options.msg.shopid
					this.shopName=this.options.msg.shopName
					this.cancel=this.options.showEditDialog
					console.log(this.cancel);
				} 
				 if (!this.options.showEditDialog) {
				 	this.fileLists=[]
				 }  
			}
			
			 
		},

		methods: {
			onChange(file, fileLists) {
				  // this.imghref=file.url;
				  console.log(file,'filesssssssss');
			      if (fileLists.length > 0) {
			        this.fileLists = [fileLists[fileLists.length-1]]//这一步，是 展示最后一次选择文件
			      }
			    },

			tt() {
			 this.cancel=false;
			},
			// 驳回
			subFail() {
				if (!this.textarea) {
					this.$message.warning('请输入未通过理由！');
				} else {
					this.$emit('examineStore', this.textarea);
					this.textarea = '';
				}
			},
			// 打开图片放大弹窗
			openBigImg(href) {
				this.imgHref = href;
				this.imgShow = true;
			},

			/* 删除图片 */
			handleRemove(file, fileList) {
				console.log(file);
				console.log(fileList);
				this.fileLists = [];
			},

			success(res, file, fileList) {
				this.imghref=res.data.url
				console.log(res.data);
				console.log(file,'res.......2');
				console.log(fileList,'res.......4');
				this.$refs.uploadFile.clearFiles();
				this.fileLists = [];
				console.log(res.data.url, '图片路径');
				console.log(res.data,'res.data');
				this.fileLists.push({
					name: file.name,
					url: res.data,
					uid: file.uid,

				});
				console.log(res.data.url, '图片');
				if (fileList.length > 0) {
				  this.fileLists.shift()
				}
			},
			//点击图片放大
			handlePictureCardPreview(file) {
				this.imgHref = file.url;
				this.imgShow = true;

			},
			
			sureEdite(){
				let params={
				shopName:this.options.msg.shopName,
				shopid:this.shopId,
				shopShowPhoto:this.imghref
				}
			this.$storesAxios.post('/v1/shop/updateShopMsgBypc',params).then(res => {
				if(res.data.code==1){
					this.$message('修改成功')
					this.options.showEditDialog=false
				}
			})	
			},


		},
	}
</script>

<style scoped="scoped">
	.bottom {
		margin-left: 174px;
		padding-bottom: 32px;
	}

	.img-msg-idcard {
		width: 120px;
		height: 120px;
	}

	.header-title {
		padding: 20px;
	}

	.header-title .border {
		width: 15px;
		height: 40px;
		background-color: #0064E4;
		margin-right: 20px;
		float: left;
	}

	.header-title p {
		float: left;
		font-weight: bold;
		line-height: 40px;
		font-size: 20px;
	}

	.examine-content {
		width: 700px;
		margin: 0 auto 20px;
	}

	.text-msg {
		width: 360px;
	}

	.img-msg {
		width: 340px;
	}

	.text-msg .clearfix {
		line-height: 30px;
	}

	.text-msg .label {
		width: 120px;
	}

	.img-msg .img-msg-title {
		margin-bottom: 10px;
		line-height: 30px;
	}

	.img-msg .img-msg-content {
		overflow: hidden;
		margin-bottom: 10px;
	}

	.img-msg .img-msg-content img {
		width: 120px;
		height: 120px;
		border: 1px solid #000;
		margin: 0 15px 15px 0;
		float: left;
	}

	.img-msg-top {
		overflow: hidden;
	}

	.opt {
		text-align: center;
		padding: 30px;
	}

	.reason {
		width: 80%;
		margin: 20px 10%;
	}

	.examine-record {
		margin: 0 auto;
		width: 700px;
		padding-bottom: 20px;
	}
</style>
